<template>
<view class="withdrawals--record--item">
  <view class="withdrawals--record__date">{{date}}</view>
  <view class="withdrawals--record__list">
    <block v-for="(item, index) in list" :key="index">
      <view class="withdrawals--record__item" @tap="pushDetail" :data-item="item">
        <view class="item--time">{{item.time}}</view>
        <view class="item--type">{{helper.getChannel(item.channel)}}</view>
        <view class="item--info">
          <view class="item__amount">{{item.amount}}元</view>
          <view :class="'item__status ' + helper.getAuditStatusColor(item.auditStatus)">
            {{helper.getAuditStatusName(item.auditStatus)}}
          </view>
        </view>
      </view>
      <view class="withdrawals--line"></view>
    </block>
  </view>
</view>
</template>
<script module="helper" lang="wxs" src="./helper.wxs"></script>
<script lang='ts'>
import { Component, Vue,Prop,Watch} from 'vue-property-decorator'

@Component
export default class Item extends Vue {
    @Prop()
    date:string
    @Prop()
    list:Array<any>=[]
  /** 查看详情 */
  pushDetail({
    currentTarget: {
      dataset: { item },
    },
  }) {
    uni.navigateTo({
      url: `/subcontract/pages/commissionRecordDetail/commissionRecordDetail?detail=${encodeURIComponent(
        JSON.stringify(item),
      )}`,
    });
  }
}
</script>
<style lang="scss" scoped>
.withdrawals--record--item {
  width: 100%;
  height: auto;
}

.withdrawals--record__date {
  width: 100%;
  height: auto;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  position: relative;
  background: rgba(156, 157, 156, 0.11);
}

.withdrawals--record__list {
  background: #fff;
}

.withdrawals--record__item {
  display: flex;
  align-content: center;
  align-items: center;
  padding: 25rpx 20rpx;
  box-sizing: border-box;
}

.item--time {
  width: 213rpx;
  margin-right: 70rpx;
}

// .item--type {
//   margin-right: 310rpx;
// }

.item--info {
  margin-left: auto;
  text-align: center;
}

.item__status {
  font-size: 24rpx;
}

.item__status.success {
  color: #575757;
}

.item__status.fail {
  color: #fe4e63;
}

.item__status.processing {
  color: #09bb07;
}

.withdrawals--line {
  width: calc(100% - 40rpx);
  border-bottom: 1px solid #e8e8e8;
  margin: 0 auto;
}

</style>